<template>
	<view class="messagebox">
		<view class="areabox" @tap="showInput({})">点击留言</view>
		<view class="comment">
			<template v-if="messages.length > 0">
				<view class="c_item" v-for="(item, index) in messages" :key="item._id">
					<view class="c_top">
						<view class="c_left"><image :src="item.user.avatars" mode="aspectFill"></image></view>
						<view class="c_right">
							<view class="c_name">{{ item.nickName }}</view>
							<view class="c_time">{{ item.date | dateFormat }}</view>
							<view class="c_delete"><image v-if="getUser._id == id" src="../../../../static/images/dynamic/delete.png" mode="widthFix"></image></view>
						</view>
					</view>
					<view class="content">{{ item.content }}</view>
					<view class="reply" v-if="item.user._id == getUser._id || getUser._id == id">
						<view class="textarea_box" @tap="showInput({ messageID: item.user._id, date: item.date, message: item.content })">回复</view>
					</view>
					<view class="children" v-if="item.children.length > 0">
						<view class="child_item" v-for="(item2, index2) in item.children" :key="index + '' + index2">
							<view class="child_name">{{ item2.name }}</view>
							<view class="kj">:</view>
							<view class="child_text">{{ item2.content }}</view>
						</view>
					</view>
				</view>
			</template>
			<template v-else>
				<view class="empty">暂无留言</view>
			</template>
		</view>
	</view>
</template>

<script>
import { mapGetters } from 'vuex';
import request from '../../../../api/request.js';
export default {
	data() {
		return {
			content: '',
			reply: ''
		};
	},
	computed: {
		...mapGetters(['getUser'])
	},
	components: {},
	props: ['id', 'messages'],
	methods: {
		showInput(data) {
			this.$emit('showInput', data);
		},
		addEmoji(emoji) {
			// console.log(emoji)
			this.content += emoji;
		},
		deleteContent() {
			this.content = this.content.slice(0, this.content.length - 1);
		}
	}
};
</script>

<style lang="scss" scoped>
.messagebox {
	box-sizing: border-box;
	padding: 30rpx 0rpx;
	padding-top: 60rpx;
	.areabox {
		margin: 0 20rpx;
		padding: 20rpx;
		font-size: 32rpx;
		color: #b3b3b3;
		margin-bottom: 30rpx;
		box-sizing: border-box;
		border-radius: 10rpx;
		// border: 2rpx solid #ccc;
		background: #f4f4f4;
		height: 80rpx;
		text-align: center;
		overflow: hidden;
	}
	.comment {
		border-top: 20rpx solid #ececec;
		margin-top: 20rpx;
		.c_item {
			padding: 40rpx 20rpx;

			// background: #e1e1e1;
			.c_top {
				display: flex;
				position: relative;
				.c_left {
					width: 90rpx;
					height: 100%;
					display: flex;
					justify-content: center;
					align-items: center;
					image {
						width: 80rpx;
						height: 80rpx;
						border-radius: 10rpx;
					}
				}
				.c_right {
					// background: #5A9BEC;
					position: relative;
					flex: auto;
					padding-left: 10rpx;
					.c_name {
						font-size: 34rpx;
						color: #3b3b3b;
					}
					.c_time {
						font-size: 28rpx;
						color: #c1c1c1;
					}
					.c_delete {
						position: absolute;
						top: 0;
						right: 0;
						display: flex;
						justify-content: flex-end;
						image {
							width: 34rpx;
							height: auto;
							padding-left: 20rpx;
						}
					}
				}
			}
			.content {
				font-size: 30rpx;
				padding: 40rpx;
				box-sizing: border-box;
				width: 100%;
				display: flex;
				justify-content: center;
				align-items: cneter;
				flex-wrap: wrap;
			}
			.reply {
				margin: 0rpx 20rpx;
				display: flex;
				.textarea_box {
					flex: 10;
					margin-right: 10rpx;
					border-radius: 10rpx;
					background: #f4f4f4;
					overflow: hidden;
					padding: 15rpx 20rpx;
					box-sizing: border-box;
					overflow: hidden;
					font-size: 30rpx;
					color: #8b8b8b;
				}
			}
			.children {
				padding: 0rpx 20rpx;
				padding-top: 20rpx;
				.child_item {
					display: flex;
					font-size: 30rpx;
					padding-bottom: 10rpx;
					.child_name {
						// font-size: 32rpx;
						color: #1a85cc;
					}
					.kj {
						padding: 0rpx 10rpx;
					}
					.child_text {
						word-wrap: break-word;
						word-break: normal;
						flex: 8;
					}
				}
			}
		}
	}
	.comment .c_item:not(:last-child) {
		border-bottom: 2rpx solid #e2e2e2;
	}
}
.empty {
	height: 40vh;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #ccc;
	font-size: 32rpx;
}
</style>
